<template>
  <el-dialog v-model="showDialog"
             title="添加项目"
             :close-on-click-modal="false">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="110px">
      <el-form-item label="公司ID" prop="company_id">
        <company-selector v-model="form.company_id"/>
      </el-form-item>
      <el-form-item label="项目名称" prop="company_project_name">
        <el-input v-model="form.company_project_name"/>
      </el-form-item>
      <el-form-item label="项目编号" prop="company_project_code">
        <el-input v-model="form.company_project_code"/>
      </el-form-item>
      <el-form-item label="项目状态" prop="company_project_state">
        <state-selector v-model="form.company_project_state"/>
      </el-form-item>
      <el-form-item label="合同资金" prop="company_project_m">
        <el-input-number v-model="form.company_project_m" style="width: 200px" min="0">
          <template #suffix>
            <span>元</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="收款进度" prop="company_project_jd">
        <el-input-number v-model="form.company_project_jd" :min="0" :max="100" :precision="0">
          <template #suffix>
            <span>%</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="项目合同" prop="company_project_word">
        <file-uploader v-model="form.company_project_word" v-model:company-id="form.company_id"/>
      </el-form-item>
      <el-form-item label="合同开始日期" prop="company_project_bgtime">
        <el-date-picker v-model="form.company_project_bgtime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"/>
      </el-form-item>
      <el-form-item label="合同结束日期" prop="company_project_time">
        <el-date-picker v-model="form.company_project_time"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="选择日期"/>
      </el-form-item>
      <el-form-item>
        <el-button class="ml-auto" type="primary" @click="submitForm">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, useTemplateRef, watchEffect} from "vue";
import CompanySelector from "../../../components/CompanySelector.vue";
import StateSelector from "./StateSelector.vue";
import {type FormInstance, type FormRules, ElMessage} from "element-plus"
import {useMutation} from "@pinia/colada";
import {insertProject} from "../../../api/project.ts";
import FileUploader from "../../../components/FileUploader.vue";
import type {ProjectVO} from "../../../types/project";

const showDialog = defineModel({default: true});

watchEffect(() => {
  if (showDialog.value) {
    formRef.value?.clearValidate()
  }
})
const emits = defineEmits<{
  success: []
}>();

const form = ref<ProjectVO>({});
const rules = ref<FormRules<ProjectVO>>({
  company_id: [
    {required: true, message: '请选择公司ID'}
  ],
  company_project_name: [
    {required: true, message: '请输入项目名称'}
  ],
  company_project_code: [
    {required: true, message: '请输入项目编号'}
  ],
  company_project_state: [
    {required: true, message: '请选择项目状态'}
  ],
  company_project_time: [
    {required: true, message: '请选择合同结束日期'}
  ]
})
const formRef = useTemplateRef<FormInstance>('formRef')
const submitForm = async () => {
  await formRef.value?.validate((valid) => {
    if (valid) {
      insertProjectFn(form.value)
    }
  })
}

let {mutate: insertProjectFn} = useMutation({
  mutation: (project: ProjectVO) => insertProject(project),
  onSuccess: () => {
    showDialog.value = false
    formRef.value?.resetFields()
    emits("success")
    ElMessage.success("添加成功")
  },
  onError: () => {
    ElMessage.error("添加失败")
  }
});
</script>

<style scoped>

</style>